<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-07-04 21:29:54
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-07-14 20:21:54
 * @FilePath: \dance\components\z-video\z-video.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="video">
    <view class="video-cover" @click="onGoVideo(props.data.id)">
      <view class="video-cover-image">
        <uv-image
          :src="
            props.data?.cover ||
            (isFileType(props.data?.address) === 'image' ? props.data?.address : defaultImagesList[$uv.random(0, defaultImagesList.length - 1)])
          "
          height="100%"
          width="100%"
        ></uv-image>
      </view>
    </view>
    <view class="video-image" @click="onGoTeacher(props.data?.teacher?.id)">
      <text class="name">{{ props.data.title }}</text>
      <text class="username">{{ props.data?.teacher?.username || '无' }}</text>
      <view class="image">
        <uv-avatar :src="props.data?.teacher?.profilePhoto || defaultImages[2]" size="85rpx" mode="aspectFill"></uv-avatar>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { isFileType, onGoTeacher, onGoVideo } from '@/common/js/fn.js';
  import { ref, watch } from 'vue';
  import { defaultImages, defaultImagesList } from '@/common/js/global.js';
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  });
</script>
<style lang="scss" scoped>
  .video {
    display: flex;
    flex-wrap: wrap;
    height: 551rpx;
    font-size: 24rpx;
    width: 100%;
    border-radius: 4px;
    position: relative;
    &-cover {
      position: relative;
      width: 100%;
      &-image {
        border-radius: 17rpx;
        overflow: hidden;
        width: 100%;
        height: 485rpx;
      }
    }
    &-image {
      font-size: 24rpx;
      .name {
        position: absolute;
        left: 27rpx;
        bottom: 80rpx;
        background-color: #1d1f24;
        padding: 9rpx 24rpx;
        border-radius: 24rpx;
        color: #fff;
      }
      .username {
        position: absolute;
        right: 98rpx;
        bottom: 14rpx;
      }
      .image {
        position: absolute;
        right: -9rpx;
        bottom: 9rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #1d1f24;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
